define(function(){
    
    function Magnifier(ops){
        this.left = ops.left;
        this.right = ops.right;
        this.sBspan = ops.sBspan;
        this.sBox = ops.sBox;
        this.bBox = ops.bBox;
        this.sBimg = ops.sBimg;
        this.bBimg = ops.bBimg;
        this.imgBox = ops.imgBox;
        this.imgs = ops.imgs;
        this.imgBox.style.width = (this.imgs.length+1)*this.imgs[0].offsetWidth +"px";
        this.index = 0;
        this.addEvent();
    }
    Magnifier.prototype.addEvent = function(){
        const _this = this;
        this.sBox.onmouseenter = function(){
            _this.show();
        }
        this.sBox.onmouseleave = function(){
            _this.hide();
        }
        this.sBox.onmousemove = function(eve){
            const e = eve||window.event;
            _this.move(e); 
        }
        this.left.onclick = function(){
            _this.leftChangeIndex();
        }
        this.right.onclick = function(){
            _this.rightChangeIndex();
        }
        for(let i=0;i<this.imgs.length;i++){
            this.imgs[i].onclick = ()=>{
                for(var j=0;j<this.imgs.length;j++){
                    this.imgs[j].style.border = "1px solid #EFF0F5";
                }
                console.log(i);
                this.bBimg.src = this.sBimg.src = this.imgs[i].src;
                this.imgs[i].style.border = "1px solid red"
            }
        }
    }
    Magnifier.prototype.rightChangeIndex = function(){
        if(this.index === this.imgs.length-5){
            this.index = 0;
        }else{
            this.index++;
        }
        this.render();
    }
    Magnifier.prototype.leftChangeIndex = function(){
        if(this.index === 0){
            this.index = 0
        }else{
            this.index--;
        }
        this.render();
    }
    Magnifier.prototype.render = function(){
        move(this.imgBox,{
            left:-this.index*this.imgs[0].offsetWidth
        })
    }
    Magnifier.prototype.show = function(){
        this.bBox.style.display = "block";
        this.sBspan.style.display = "block";
        this.sBspan.style.width = this.sBox.offsetWidth/(this.bBimg.offsetWidth/this.bBox.offsetWidth)+"px";
        this.sBspan.style.height = this.sBox.offsetHeight/(this.bBimg.offsetHeight/this.bBox.offsetHeight) +"px";
    }
    Magnifier.prototype.hide = function(){
        this.bBox.style.display = "none";
        this.sBspan.style.display = "none";
    }
    Magnifier.prototype.move = function(e){
        let L = e.pageX -(this.sBox.offsetWidth /2)- this.sBspan.offsetWidth +68;
        let T = e.pageY -this.sBox.offsetHeight- this.sBspan.offsetHeight/2 -20 + 224;


        if(L < 0) L = 0;
        if(T < 0) T = 0;
        if(L > this.sBox.offsetWidth - this.sBspan.offsetWidth){
            L = this.sBox.offsetWidth - this.sBspan.offsetWidth
        }
        if(T > this.sBox.offsetHeight - this.sBspan.offsetHeight){
            T = this.sBox.offsetHeight - this.sBspan.offsetHeight
        }
        this.sBspan.style.left = L + "px";
        this.sBspan.style.top = T + "px";
        let X = L/(this.sBox.offsetWidth -  this.sBspan.offsetWidth);
        let Y = T/(this.sBox.offsetHeight - this.sBspan.offsetHeight);
        this.bBimg.style.left = (this.bBox.offsetWidth-this.bBimg.offsetWidth)*X+0.992+"px";
        this.bBimg.style.top = (this.bBox.offsetHeight-this.bBimg.offsetHeight)*Y-4.98+"px";
    }

    return Magnifier;
})